/**
 * 
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...




$(function () {

    // - 敲击回车事件 => 获取title里面输入的内容，创建待办事项列表结构 , 放入到待办事项列表之中; 
    var $title = $("#title");
    $title.keydown(function (e) {
        e = e || window.event;
        if (e.keyCode === 13) {

            var value = $title.val().replace(/(^\s*)|(\s*$)/g, ""); 
            if(value === ""){
                return;
            }else{
                //创建新的代办事项结构；
                createTodo();
                $title.val("");
            }
            
        }
    });
   
    //  localstorage :刷新页面加载

    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i); 
        console.log(localStorage.getItem(key))
        let old = localStorage.getItem(key);
        var $li2 = $(` 
                    <li>
                        <input type="checkbox">
                        <p>${old}</p>
                        <a href="javascript:">-</a> 
                    </li>`);    
                    $("#todolist").append($li2);    
    }   
   

    function createTodo() {
        var val = $title.val();
        
        // localstorage : 添加

        localStorage.setItem(val,val);
        

        //创建dom结构；
        var $li = $(` 
                    <li>
                        <input type="checkbox">
                        <p>${val}</p>
                        <a href="javascript:void(0)">-</a> 
                    </li>`);
        
        $("#todolist").append($li);
        counts();
    }
    // 我们接下来要实现的就是 $li 里面的三个功能 : 
    // 1. 根据 checkbox值 切换$li 所在位置; 
    // 2. p 标签的即时编辑功能; 
    // 3. a 标签的删除功能; 

    // - 功能实现 1 => 添加input:type=checkbox的 change事件; 
    $("section").on("change", "input[type=checkbox]", function () {

        if ($(this).prop("checked")) {

            //找到当前元素的父级li,然后把这个父级li放入到donlist之中；
            $("#donelist").append($(this).parent());
            counts();
        } else {
            $("#todolist").append($(this).parent());
            counts();
        }
    });

    //即时编辑的原理：
    //-1.把原来的内容变为input框；
    $("#todolist").on("click", "p", function () {

        // 在点击的时候把当前的内容放入 一个input的value之中，放到p标签里; 
        $(this).html("<input type='text' value='" + $(this).text() + "'>");
        // input标签创建结束之后，选择创建出来的input输入框; 
        var $ipt = $(this).children();

        // 给当前输入框绑定点击事件， 如果触发点击事件，那么就阻止掉事件冒泡; 
        $ipt.click(function (evt) {
            var e = evt || event;
            e.stopPropagation();
        })
        // 把输入框里面的文字全部选中; 
        $ipt.select();
        // 失去焦点的时候让当前元素的outerHTML 等于 当前元素的value值; 
        $ipt.blur(function (evt) {
            this.outerHTML = this.value;
        })


    })
    //删除功能
    $("section").on("click", "a", function () {
        $(this).parent().remove()
        // console.log($(this).prev().html());

        //localstorage ========= 删除
        var name = $(this).prev().html();
        localStorage.removeItem(name);


        counts();
    })
    function counts() {
        var $count1 = $("#todolist").children().length;
        var $count2 = $("#donelist").children().length;
        $("#todocount").html($count1);
        $("#donecount").html($count2);
    }
    counts();

   //跨域
    $(document).on("click", function () {
            $.ajax({
                url: "http://localhost/kk",
                type: "GET",
                data: {} ,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                }
            }
            )
        })

    $(window).on("click", function () {
        $.ajax({
            type : "GET",
            url : "http://localhost/kk",
            data : "",
            success : function(res){
                    console.log(res);
                    fn(res)

            }
        })
        
    }) 
    function fn(res) {
                $("#ipv4").html(`${res.ip}`)
                $("#addr").html(`${res.country} ${res.area}互联网数据交换中心`)
            }
   

})
